var bgid;
var nn;
var wrap;
var x = 0;
//画布
var c;
var cxt;
var rot = 0;
var orot = 0
window.onload=function(){
    alert('测试！！！')
	wrap = document.querySelectorAll(".wrap");
	c = document.getElementById("bike");
	c.width = 150;
	c.height = 102;
	cxt = c.getContext("2d");
	cxt.save();				
	creatft();
	cxt.restore();
	creatBike();
}

function ostop(){
	clearInterval(bgid);
	clearInterval(nn);
}

function onext(){
	clearInterval(bgid);
	clearInterval(nn);
	bgid = setInterval("steadily()",20);
	nn = setInterval(function(){
		cxt.clearRect(0, 0, 150, 120);
		cxt.save();				
		creatft();
		cxt.restore();
		creatBike();
	},20);	
}
function steadily(){				
	x -= 2;
	for (var i = 0; i < wrap.length; i++) {
		wrap[i].style.marginLeft = x + "px";
	}
	if(x < -799){
//		var container1 = document.querySelectorAll(".container1")[0];
//		var newele = document.createElement("div");;
//		newele.className = "container1";
		x=0;
//		wrap.removeChild(container1);
//		wrap.appendChild(newele);					
	}
}
//自行车
function creatBike(){
	var hudu = orot * Math.PI/180;
	var y = 15 - 15 * Math.cos(hudu);
	var x = 15 * Math.sin(hudu);  
	//脚踏板里
	cxt.beginPath();
	cxt.strokeStyle = "#333";
	cxt.moveTo(58,77);
	cxt.lineTo(58 + x,62 + y);
	cxt.lineTo(54+x,62+y);
	cxt.stroke();
	//后车轮
	cxt.beginPath();
	cxt.lineWidth = 6;
	cxt.strokeStyle = "#333";
	cxt.arc(27, 77, 23, 0, 2 * Math.PI);
	cxt.stroke();
	//前车轮
	cxt.beginPath();
	cxt.arc(97, 77, 23, 0, 2 * Math.PI);
	cxt.stroke();
	//车架子
	cxt.beginPath();
	cxt.lineWidth = 2;
	cxt.strokeStyle = "#D84C29";
	cxt.moveTo(27,77);
	cxt.lineTo(58,77);
	cxt.lineTo(85,40);
	cxt.lineTo(48,40);
	cxt.lineTo(27,77);
	cxt.stroke();
	cxt.beginPath();
	cxt.lineWidth = 3;
	cxt.moveTo(58,77);
	cxt.lineTo(43.6,24);
	cxt.stroke();
	cxt.beginPath();
	cxt.moveTo(97,77);
	cxt.lineTo(81,26);
	cxt.stroke();
	cxt.fillRect(38,20,14,5);
	cxt.beginPath();
	cxt.fillStyle = '#666';
	cxt.fillRect(73,24,20,3);
	//脚踏板外
	cxt.beginPath();
	cxt.strokeStyle = "#333";
	cxt.moveTo(58,76);
	cxt.lineTo(58-x,93-y);
	cxt.lineTo(62-x,93-y);
	cxt.stroke();
	orot += 2;
}
//辐条
function creatft(){
	var hudu = rot * Math.PI/180;
	var x = 20 - 20 * Math.cos(hudu);
	var y = 20 * Math.sin(hudu);  
	cxt.translate(27,77);
	for(var i = 0; i < 8; i++) {
		cxt.beginPath();					
		cxt.lineWidth = 1.5;
		cxt.strokeStyle = '#388EFF';
		cxt.moveTo(0,0);
		cxt.lineTo(20 - x,0 + y);
		cxt.rotate(Math.PI/4);
		cxt.stroke();
	}
	cxt.translate(70,0);
	for(var i = 0; i < 8; i++) {
		cxt.beginPath();					
		cxt.moveTo(0,0);
		cxt.lineTo(20 - x,0 + y);
		cxt.rotate(Math.PI/4);
		cxt.stroke();
	}
	rot+=4;
}

